<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>jQuery Hover</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function() {
            $('ul.photos li').hover(function() {
                var imageOver = $(this).find('img').attr('src');
                $(this).find('a.image').css({'background': 'url('+ imageOver + ') no-repeat center bottom'});
            $(this).find('span').stop().fadeTo('normal', 0, function() {
                $(this).hide()
            });
            }, function() {
                $(this).find('span').stop().fadeTo('normal', 1).show();
            });
        });
       
       </script>
</head>

<body>
    <div id="wrapper">
        <ul class="photos">
            <li>
                <a href="#" class="image"><span><img src="images/dv1_test.jpg" alt="image" /></span></a>
                
            </li>
            
            <li>
                <a href="#" class="image"><span><img src="images/image-2.jpg" alt="image" /></span></a>
                <h2><a href="#">Image Name</a></h2>
            </li>
            
            <li>
                <a href="#" class="image"><span><img src="images/image-3.jpg" alt="image" /></span></a>
                <h2><a href="#">Image Name</a></h2>
            </li>
            
            <li>
                <a href="#" class="image"><span><img src="images/image-4.jpg" alt="image" /></span></a>
                <h2><a href="#">Image Name</a></h2>
            </li>
        
        
        </ul>
    
    
    </div><!--End #wrapper-->

</body>

</html>